import React, { Component } from 'react';
import './App.css';
import { Link, Route, withRouter } from 'react-router-dom'

// 引入对应的页面组件
// 注意: 路由模式组件一定要包裹 Link 和Route组件 否则报错
import Rule from './router';
// 引入自定义的导航组件
import Mynav from './views/mynav/Mynav'

class App extends Component {
  render() {
    return (
      <div>
        {/* 声明式导航  <router-link to>*/}
        <p>
          {/* <Link to='/home' tag='p'>首页</Link> */}
          {/* 查询字符串方式传参 */}
          {/* <Link to='/category?id=99&num=1000'>分类</Link> */}
          {/* restful 风格传参 */}
          {/* <Link to={{ pathname: '/car'}}>购物车</Link> */}
          {/*
             隐式传参 参数在url看不见
             //埋点: 可以将一些用户看不的参数传递,然后根据参数分析用户数据.
          */}
          {/* <Link to={{ pathname: '/mine', search: 'id=10', state: { name: 'zhangsan', age: 20 } }}> 我的</Link> */}
        </p>

        {/* 使用自定义导航实现声明式导航 */}
        <p>
             <Mynav to='/home' tag='span'>首页</Mynav>
             <Mynav to='/category' tag='span'>分类</Mynav>
             <Mynav to='/car' tag='span'>购物车</Mynav>
             <Mynav to='/mine' tag='span'>我的</Mynav>

        </p>

        {/* 编程式导航  通过事件实现跳转 */}
        {/* <p>
          <span onClick={this.go.bind(this, { pathname: '/home', search: 'age=18', state: { name: "孙晓通" } })}>首页</span>
          <span onClick={this.go.bind(this, '/category')}>分类</span>
          <span onClick={this.go.bind(this, '/car')}>购物车</span>
          <span onClick={this.go.bind(this, '/mine')}>我的</span>
        </p> */}
        {/* 对应显示的组件 <router-view> , */}
        <Rule></Rule>
      </div>
    );
  };
  // 定义事件
  go(url) {
    // 编程式盗汗跳转 this.props.history.push(url), this.props.history.go(-1)或goback() 返回上一页
    // 注意: 不是所有的组件的props 属性上都有 history ,match,location这三个路由参数的, 
    // 当组件是通过路由跳转过去的时候,那么当前这个组件是由路由参数的,否则没有路由参数,
    // 可以通过react-router-dom 中提供的一个高阶组件方法Hoc方法,叫做withRouter(组件) ,这样被包裹的组件的props属性上就有路由参数
    // 
    // console.log(this);

    this.props.history.push(url)
  }
}

export default withRouter(App);
